import React, { Component } from 'react'
import { connect } from 'dva';

import { Modal } from 'antd';

const { confirm } = Modal;

import FloorDetails from './FloorDetails';
import SectionItem from './SectionItem';

interface IProps {
  queryItemDetails: Function;
  dispatch?: Function;
  data: {
    id: string;
    name: string;
    groupName: string;
    item?: Array<any>;
  };
  sub?: any;
  ruleId: string;
  id: string;
}

interface IState {
  expanded: boolean;
}

@connect()
class FloorItem extends Component<IProps, IState> {

  state = {
    expanded: false
  }

  setShow = () => {
    const { expanded } = this.state;
    const { data, queryItemDetails } = this.props;

    if (!expanded && !Array.isArray(data.item)) {
      queryItemDetails(() => this.setState({ expanded: true }))
    } else {
      this.setState({ expanded: !expanded })
    }
  }

  showConfirm = () => {
    const { data, dispatch, ruleId } = this.props;
    
    confirm({
      title: '是否删除该楼层？',
      content: '',
      onOk() {
        dispatch({ type: 'task_month/delTagert', payload: { id: data.id, state: 2, ruleId } })
      },
      onCancel() { },
    })
  }
  
  render() {

    const { expanded } = this.state;
    const { data, id } = this.props;

    return (
      <>
        <SectionItem 
          data={{ name: data.name, groupName: data.groupName }} 
          expanded={this.state.expanded} 
          setShow={this.setShow}
          checkDel={this.showConfirm}
        />
        { expanded && <FloorDetails data={data.item} id={id}/> }
      </>
    )
  }
}

export default FloorItem